<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主播列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=”screen-orientation” content=”portrait”>
    <meta name=”x5-orientation” content=”portrait”>
    <meta name=”browsermode” content=”application”>
    <meta name=”x5-page-mode” content=”app”>
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="style.css">
    <script src="lib/vue.min.js"></script>
    <script src="lib/crypto-js.js"></script>
    <script src="lib/axios.min.js" type="text/javascript"></script>
    <script src="js/fetch.js" type="text/javascript"></script>
    <script src="js/mixins.js" type="text/javascript"></script>
</head>
<body>
<div class="box">
    <header class="top">
        <span class="fl back"></span>
        <p>直播列表</p>
    </header>
    <div class="main">
        <section class="fl listBox" v-for="item in list" @click="window.location.href='live1.html?id='+item.id">
            <article class="show-img">
                <img :src="item.pic">
            </article>
            <aside class="live-state"><span class="state"></span>直播中</aside>
            <aside class="people-number"><span class="colorY">{{item.hit}}</span> 人观看</aside>
            <footer class="live-name">
                <nav class="live-headImg fl"><img :src="item.pic"></nav>
                <p class="fl">{{item.name}}</p>
                <div class="area fl">{{item.diqu}}</div>
            </footer>
        </section>
        <!--<section class="fl listBox">
            <article class="show-img">
                <img src="images/list.jpg">
            </article>
            <aside class="live-state"><span class="state"></span>直播中</aside>
            <aside class="people-number"><span class="colorY">23597</span> 人观看</aside>
            <footer class="live-name">
                <nav class="live-headImg fl"><img src="images/head.jpg"></nav>
                <p class="fl">暖暖小丫鬟</p>
                <div class="area fl">成都</div>
            </footer>
        </section>-->
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:'.box',
        mixins: [mixins],
        data:{
            list:[]
        },
        created:function(){
            this.getData();
        },
        methods:{
            getData:function(){
                var vm=this;
                fetch.get('/zhubo').then(function (res) {
                    console.log(res);
                    vm.list=res;
                }).catch(function (e) {
                    console.log(e)
                });
            }
        }
    });
</script>
</body>
</html>